<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>在线考勤系统(网页版)</title>
    <meta name="keywords" content="在线考勤系统(网页版)"/>
    <meta name="description" content="在线考勤系统(网页版)"/>
    <link rel="stylesheet" type="text/css" href="css/jq22.css"/>
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/bootstrap-theme.min.css" rel="stylesheet"/>
    <style type="text/css">
        .front {
            width: 340px;
            margin: 5px 32px 15px 52px;
            background-color: #f0f0f0;
            color: #666;
            text-align: center;
            padding: 3px;
            border-radius: 5px;
        }

        .booking_area {
            float: right;
            position: relative;
            width: 260px;
            height: 450px;
            margin-top: 20px;
        }

        .booking_area h3 {
            margin: 5px 5px 0 0;
            font-size: 16px;
        }

        .booking_area p {
            line-height: 26px;
            font-size: 16px;
            color: #999
        }

        .booking_area p span {
            color: #666
        }

        div.seatCharts-cell {
            color: #182C4E;
            height: 25px;
            width: 25px;
            line-height: 25px;
            margin: 3px;
            float: left;
            text-align: center;
            outline: none;
            font-size: 13px;
        }

        div.seatCharts-seat {
            color: #fff;
            cursor: pointer;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }

        div.seatCharts-row {
            height: 35px;
        }

        div.seatCharts-seat.available {
            background-color: blue;
        }

        div.seatCharts-seat.focused {
            background-color: lightskyblue;
            border: none;
        }

        div.seatCharts-seat.selected {
            background-color: red;
        }

        div.seatCharts-seat.unavailable {
            background-color: #472B34;
            cursor: not-allowed;
        }

        div.seatCharts-container {
            border-right: 1px dotted #adadad;
            width: 430px;
            padding: 20px;
            float: left;
        }

        div.seatCharts-legend {
            padding-left: 0px;
            position: absolute;
            bottom: 2px;
        }

        ul.seatCharts-legendList {
            padding-left: 0px;
        }

        .seatCharts-legendItem {
            float: left;
            width: 85px;
            margin-top: 10px;
            line-height: 2;
        }

        span.seatCharts-legendDescription {
            margin-left: 5px;
            line-height: 30px;
        }

        .checkout-button {
            display: block;
            width: 80px;
            height: 24px;
            line-height: 20px;
            margin: 10px auto;
            border: 1px solid #999;
            font-size: 14px;
            cursor: pointer
        }

        #seats_chose {
            max-height: 150px;
            overflow-y: auto;
            overflow-x: none;
            width: 200px;
        }

        #seats_chose li {
            float: left;
            width: 72px;
            height: 26px;
            line-height: 26px;
            border: 1px solid #d3d3d3;
            background: #f7f7f7;
            margin: 6px;
            font-size: 14px;
            font-weight: bold;
            text-align: center
        }
    </style>
</head>
<body>
<div class="container">
    <h2 class="title" style="text-align:center;">在线考勤系统(网页版)</h2>
    <a href="count.php" style="float:right;text-decoration:none">考勤统计</a>
    <div class="demo clearfix">
        <!---左边座位列表----->
        <div class="front">讲&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;台</div>
        <div>
            <input type="text" id="rows" placeholder="行" style="display:inline;width:50px;margin-left:50px;"
                   class="form-control"/>
            <input type="text" id="cols" placeholder="列" style="display:inline;width:50px;" class="form-control"/>
            <input type="text" id="aisle_row" placeholder="过道行" style="display:inline;width:80px;"
                   class="form-control"/>
            <input type="text" id="aisle_col" placeholder="过道列" style="display:inline;width:80px;"
                   class="form-control"/>
            <input type="button" id="setting" value="设置" style="width:65px;height:32px;" class="btn btn-primary"/>
        </div>
        <div id="seat_area">
        </div>
        <!---右边出勤信息----->
        <div class="booking_area">
            <p>院系：&nbsp;&nbsp;&nbsp;<select class="form-control" id="c_dept"
                                            style="display:inline;font-size:10px;width:120px;height:28px;">
                    <option value="-1">请选择院系</option>
                </select></p>
            <p>专业：&nbsp;&nbsp;&nbsp;<select class="form-control" id="c_major"
                                            style="display:inline;font-size:10px;width:120px;height:28px;">
                    <option value="-1">请选择专业</option>
                </select></p>
            <p>班级：&nbsp;&nbsp;&nbsp;<select class="form-control" id="c_class"
                                            style="display:inline;font-size:10px;width:143px;height:28px;">
                    <option value="-1">请选择班级</option>
                </select></p>
            <p>应到：&nbsp;&nbsp;&nbsp;<span id="yd" style="color:blue;">0人</span>&nbsp;&nbsp;&nbsp;&nbsp;实到：&nbsp;&nbsp;&nbsp;<span
                        id="sd" style="color:red;">0人</span></p>
            <p></p>
            <p>缺席人员名单：</p>
            <ul id="seats_chose"></ul>
            <input type="button" class="btn btn-danger" value="确认提交" style="width:200px;height:30px;"
                   onclick="save();"/>
            <div id="legend"></div>
        </div>
    </div>
</div>
<script src="js/jquery-3.2.0.min.js"></script>
<script src="js/jquery.seat-charts.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    var count = 0;//学生人数
    var map = [];//座位结构
    var size = 11;//每排人数
    var rows = 11;//座位行数
    var aisle_row = 5;//过道行
    var aisle_col = 5;//过道列
    var xh = [];//实际学号后2位
    var full_xh = [];//实际学号
    var t_xh = [];//模板学号
    var xm = [];//姓名
    var unavailable = [];//模板不可用座位号
    var a = [];//模板座位结构
    function setSeat() {
        size = parseInt($('#cols').val());
        rows = parseInt($('#rows').val());
        aisle_row = parseInt($('#aisle_row').val());
        aisle_col = parseInt($('#aisle_col').val());
        //需要对数据进行大小验证
        //需要重新初始化右边信息
        initSeatData();
        initSeat(count, a, t_xh, unavailable);
    }

    function getIndex(row, col) {
        index = 0;
        if (col < aisle_col) {
            c_index = col;
        } else {
            c_index = col - 1;
        }
        if (row < aisle_row) {
            r_index = (row - 1) * size;
            index = r_index - (row - 1) + (c_index - 1);
        } else {
            r_index = (row - 2) * size;
            index = r_index - (row - 2) + (c_index - 1);
        }
        return index;
    }

    function initSeatData() {
        a = [];
        t_xh = [];
        for (i = 1; i <= rows; i++) {
            for (j = 1; j <= size - 1; j++) {
                t_xh.push(j);
            }
        }
        for (i = 1; i <= rows; i++) {
            s = '';
            for (j = 1; j <= size; j++) {
                if (i != aisle_row) {
                    unavailable.push(i + "_" + j);
                    if (j == aisle_col) {
                        s = s + "_";
                    } else {
                        s = s + 'c';
                    }
                } else {
                    s = s + '_';
                }
            }
            a.push(s);
        }
    }

    function initSeat(count, map, xh, unavailable) {
        var $cart = $('#seats_chose');
        var sc = $('#seat_area').seatCharts({
            map: map,
            naming: {//设置行列等信息
                top: false, //不显示顶部横坐标（行）
                getLabel: function (character, row, column) { //返回学生信息
                    index = getIndex(row, column);
                    return xh[index];
                }
            },
            legend: {//定义图例
                node: $('#legend'),
                items: [
                    ['c', 'available', '正常'],
                    ['c', 'selected', '缺席'],
                    ['c', 'unavailable', '不可用']
                ]
            },
            click: function () {
                if (this.status() == 'available') { //记录缺席
//                                        index = this.settings.row * size + this.settings.column;
                    col = this.settings.column + 1;
                    row = this.settings.row + 1;
                    index = getIndex(row, col);
                    $('<li>' + xm[index] + '</li>')
                        .attr('id', 'seats-' + this.settings.id)
                        .data('xh', full_xh[index])
                        .appendTo($cart);
                    $('#sd').text(count - sc.find('selected').length - 1 + "人");
                    return 'selected';
                } else if (this.status() == 'selected') { //若为选中状态
                    $('#sd').text(count - sc.find('selected').length + 1 + "人");
                    $('#seats-' + this.settings.id).remove();//删除缺席
                    return 'available';
                } else if (this.status() == 'unavailable') { //若为已售出状态
                    return 'unavailable';
                } else {
                    return this.style();
                }
            }
        });
        sc.get(unavailable).status('unavailable');
        $('div[class*="seatCharts-seat seatCharts-cell"]').bind("mouseover", function () {
            id = $(this).attr("id");
            pos = id.split("_");
            row = parseInt(pos[0]);
            col = parseInt(pos[1]);
            index = getIndex(row, col);
            if (!(xm === undefined || xm.length == 0 || index >= xm.length)) {
                $(this).prop("title", xm[index] + "【" + full_xh[index] + "】");
            }
        });
    }

    function getXB() {
        $('#seats_chose').empty();
        $.ajax({
            url: 'Query.php?type=findDepartMent',
            datatype: 'json',
            type: 'get',
            success: function (data) {
                var json = jQuery.parseJSON(data);
                for (var k in json) {
                    $('#c_dept').append('<option value=' + json[k].XBDM + '>' + json[k].XBMC + '</option>');
                }
            }
        });
    }

    function xb_onchange() {
        xm = [];
        $('#c_major').empty();
        $('#c_class').empty();
        $('#c_major').append('<option value=-1>请选择专业</option>');
        $('#c_class').append('<option value=-1>请选择班级</option>');
        initSeat(count, a, t_xh, unavailable);
        $('#seats_chose').empty();
        if ($('#c_dept option:selected').val() != -1) {
            $('#dept').text($('#c_dept option:selected').text());
            $.ajax({
                url: 'Query.php?type=findMajorByDeptId&deptId=' + $('#c_dept option:selected').val(),
                datatype: 'json',
                type: 'get',
                success: function (data) {
                    var json = jQuery.parseJSON(data);
                    for (var k in json) {
                        $('#c_major').append('<option value=' + json[k].ZYDM + '>' + json[k].ZYMC + '</option>');
                    }
                }
            });
        }
        $('#yd').text('0人');
        $('#sd').text('0人');
    }

    function zy_onchange() {
        xm = [];
        initSeat(count, a, t_xh, unavailable);
        $('#seats_chose').empty();
        $('#c_class').empty();
        $('#c_class').append('<option value=-1>请选择班级</option>');
        if ($('#c_major option:selected').val() != -1) {
            $('#marjor').text($('#c_major option:selected').text());
            $.ajax({
                url: 'Query.php?type=findClassByMarjorId&marjorId=' + $('#c_major option:selected').val(),
                datatype: 'json',
                type: 'get',
                success: function (data) {
                    var json = jQuery.parseJSON(data);
                    for (var k in json) {
                        $('#c_class').append('<option value=' + json[k].BJDM + '>' + json[k].BJMC + '</option>');
                    }
                }
            });
        }
        $('#yd').text('0人');
        $('#sd').text('0人');
    }

    function bj_onchange() {
        if ($('#c_class option:selected').val() != -1) {
            $('#class').text($('#c_class option:selected').text());
            $.ajax({
                url: 'Query.php?type=findStudentInfoByClassId&classId=' + $('#c_class option:selected').val(),
                datatype: 'json',
                type: 'get',
                success: function (data) {
                    map = [];
                    xh = [];
                    xm = [];
                    full_xh = [];
                    var json = jQuery.parseJSON(data);
                    count = json.count;
                    $('#yd').text(count + "人");
                    $('#sd').text(count + "人");
                    for (var k in json.info) {
                        xh.push(json.info[k].xh);
                        full_xh.push(json.info[k].full_xh);
                        xm.push(json.info[k].xm);
                    }
                    for (i = 1; i <= rows; i++) {
                        s = '';
                        for (j = 1; j <= size; j++) {
                            if (i != aisle_row) {
                                if (j == aisle_col) {
                                    s = s + '_';
                                } else {
                                    s = s + 'c';
                                }
                            } else {
                                s = s + '_';
                            }
                        }
                        map.push(s);
                    }
                    u = [];
                    s_col = count % (size - 1) == 0 ? 1 : (count % (size - 1) >= aisle_col ? count % (size - 1) + 2 : count % (size - 1) + 1);
                    s_row = parseInt(count / (size - 1)) + 1;
                    for (i = s_row < aisle_row ? s_row : s_row + 1; i <= rows; i++) {
                        for (j = s_col; j <= size; j++) {
                            u.push(i + "_" + j);
                        }
                        s_col = 1;
                    }
                    initSeat(count, map, xh, u);
                }
            });
        } else {
            xm = [];
            initSeat(count, a, t_xh, unavailable);
            $('#yd').text("0人");
            $('#sd').text("0人");
        }
        $('#seats_chose').empty();
    }

    function save() {
        if ($('#c_class option:selected').val() != -1) {
            xbdm = $('#c_dept option:selected').val();
            xbmc = $('#c_dept option:selected').text();
            zydm = $('#c_major option:selected').val();
            zymc = $('#c_major option:selected').text();
            bjdm = $('#c_class option:selected').val();
            bjmc = $('#c_class option:selected').text();
            ydrs = count;
            sdrs = count - $('#seats_chose li').length;
            qxqk = '';
            if ($('#seats_chose li').length > 0) {
                $.each($('#seats_chose li'), function (k, v) {
                    qxqk = qxqk + ($(v).data('xh') + ":" + $(v).text()) + ",";
                });
                qxqk = qxqk.substring(0, qxqk.length - 1);
            }
            $.ajax({
                url: 'Query.php?type=save',
                data: 'xbdm=' + xbdm + '&xbmc=' + xbmc + '&zydm=' + zydm + '&zymc=' + zymc + '&bjdm=' + bjdm + '&bjmc=' + bjmc + '&ydrs=' + ydrs + '&sdrs=' + sdrs + '&qxqk=' + qxqk,
                datatype: 'json',
                type: 'get',
                success: function (data) {
                    alert("数据提交成功");
                    window.location.reload();
                }
            });
        } else {
            alert("请先选择要考勤的班级");
        }
    }

    $(function () {
        $('#setting').bind("click", setSeat);
        $('#c_dept').bind("change", xb_onchange);
        $('#c_major').bind("change", zy_onchange);
        $('#c_class').bind("change", bj_onchange);
        initSeatData();
        initSeat(count, a, t_xh, unavailable);
        getXB();
    });
</script>
</body>
</html>